<template>
	<view class="content">
		<!-- [uni-nav-bar 自定义导航栏](https://uniapp.dcloud.net.cn/component/uniui/uni-nav-bar.html) -->
		<uni-nav-bar ref="navBar" class="uni-navi-bar" status-bar="true" :border="false" color="#333333" fixed="true"
			left-icon="left" left-text="返回" :title="option.navBar.title" @clickLeft="onNavBarLeftClick"
			:titleRightIcon="tabBars[tabIndex].isNeedFilter ? titleRightIcon : ''" :titleRightIcon2="titleRightIcon2"
			@onClickTitleRightIcon="onClickTitleRightIcon" @onClickTitleRightIcon2="onClickTitleRightIcon2">
		</uni-nav-bar>

		<c-tab-bar :tabBars="tabBars" :tabIndex="tabIndex" :tabWidth="tabWidth" :scrollInto="scrollInto"
			:marginL="tabItemMargin" :marginR="tabItemMargin" @onTabItemClick="onTabItemClick"></c-tab-bar>
		<swiper :current="tabIndex" class="swiper-box" :duration="300" @change="onTabChange"
			:style="{height: swiperHeight + 'px'}">
			<swiper-item class="swiper-item" v-for="(tab,index) in tabBars" :key="index">
				<scroll-view class="scroll-v" scroll-y :refresher-enabled="tab.content.refresherEnable"
					@refresherrefresh="onRefresh()" :enable-back-to-top="true" :lower-threshold="75"
					:refresher-triggered="tab.content.refreshing" @scrolltolower="onLoadMore(index)"
					:style="{height: (swiperHeight) + 'px'}" 
					:scroll-top="tab.content.scrollTopReal"
					:show-scrollbar="true"
					@scroll="onScroll"
					>
					<view class="flex-column" v-if="tab.content.list.length > 0"
						:style="{'min-height': (swiperHeight + 'px')}">
						<iooItem v-for="(item2, index2) in tab.content.list" :index="index2" :key="item2.id" :item="item2"
							@onItemClick="onItemClick(item2, index2)">

						</iooItem>
					</view>
					<c-status-view v-if="tab.content.list.length == 0 && !tab.content.firstRequest"
						:status="tab.content.contentStatus" @onStatusClick="onStatusClick"></c-status-view>
					<uni-load-more :status="tab.content.loadStatus" :icon-size="16"
						v-if="tab.content.isLoading || tab.content.list.length > 0 || tab.content.hide"
						:content-text="loadMoreViewContentText" />
				</scroll-view>
			</swiper-item>
		</swiper>

		<text class="text-bottom-btn center active2" @click="onAddEmployeeBtnClick">添加店员</text>

		<c-pop-passcard-filter ref="filter" @onEnsureBtnClick="onFilterEnsureBtnClick"></c-pop-passcard-filter>
	</view>
</template>

<script>
	import constant from './../../utils/constant.js'
	import util from './../../utils/util.js'
	import MSC from './../../utils/mishang_constant.js'
	import IOOC from './../../pages-ioo/utils/ioo-constants.js'

	// 缓存每页最多
	const MAX_CACHE_DATA = 100;
	// 缓存页签数量
	const MAX_CACHE_PAGE = 6;

	const TABBARS = {
		tab1: {
			type: 1,
			name: '待审核',
			isNeedFilter: false,
			content: JSON.parse(JSON.stringify(constant.LIST_CONTENT))
		},
		tab2: {
			type: 2,
			name: '批准进场',
			isNeedFilter: true,
			content: JSON.parse(JSON.stringify(constant.LIST_CONTENT))
		},
		tab3: {
			type: 3,
			name: '不通过',
			isNeedFilter: true,
			content: JSON.parse(JSON.stringify(constant.LIST_CONTENT))
		},
		tab4: {
			type: 4,
			name: '已完成',
			isNeedFilter: true,
			content: JSON.parse(JSON.stringify(constant.LIST_CONTENT))
		},
		tab5: {
			type: 5,
			name: '已取消',
			isNeedFilter: true,
			content: JSON.parse(JSON.stringify(constant.LIST_CONTENT))
		},
		tab6: {
			type: 6,
			name: '已失效',
			isNeedFilter: true,
			content: JSON.parse(JSON.stringify(constant.LIST_CONTENT))
		}
	};

	// 1. 导入组件
	import iooItem from '@/pages-ioo/components/ioo-item/ioo-item.vue'

	export default {
		components: {
			iooItem
		}, // 2. 注册组件
		data() {
			let option = {
				navBar: JSON.parse(JSON.stringify(constant.navBar))
			}
			option.navBar.title = "标题"
			return {
				navBarHeight: 0,
				refresherTriggered: false,
				loadMoreViewShow: false,
				loadMoreViewContentText: {
					contentnomore: "到底啦~"
				},
				loadMoreViewStatus: 'noMore',
				cacheTab: [],
				tabIndex: 0,
				tabBars: [TABBARS.tab1, TABBARS.tab2, TABBARS.tab3, TABBARS.tab4, TABBARS.tab5, TABBARS.tab6],
				screen: "",
				tabItemMargin: 30, //tabItem第一个margin-left和最后一个margin-right的margin
				tabWidth: 0,
				scrollInto: "",
				swiperHeight: 1000,
				loadTexts: constant.LOAD_TEXTS,
				seletedItem: {
					range_name: ""
				},
				titleRightIcon: "/static/btn_bar_screen.png",
				titleRightIcon2: "/static/btn_problem.png",
				scrollTop: -1,
			}
		},
		onLoad(option) {
			var systemInfo = uni.getSystemInfoSync();
			//scroll-view的高度 = 屏幕高度 -（顶部状态栏高度 + 导航栏高度） -（底部tabBar高度 + 底部安全区域高度）

			this.tabWidth = (getApp().globalData.screenWidth - this.tabItemMargin * 2) / this.tabBars.length;
			let contentHeight = systemInfo.screenHeight - (uni.getSystemInfoSync()
				.statusBarHeight + this.$refs.navBar.height) - (systemInfo.safeAreaInsets.bottom);
			//80 tabBar的高度 90 底部按钮高度 单位：rpx，除以 getApp().globalData.pxToRpxScale 转换为 px
			this.swiperHeight = contentHeight - (80 + 90) / getApp().globalData.pxToRpxScale;

			this.init(option);
		},
		onShow() {
			var tab = this.tabBars[this.tabIndex];
			if (!tab.content.firstRequest && tab.content.page == 1) {
				tab.content.refreshFlag = true;
				this.getList();
			}
		},
		methods: {
			init(option) {
				//TODO remove
				IOOC.setMock();
				
				this.refresh();
			},
			refresh() {
				var tab = this.tabBars[this.tabIndex];
				setTimeout(() => {
					tab.content.refreshFlag = true;
					tab.content.refreshing = true;
				}, 35)
			},
			onNavBarLeftClick() {
				uni.navigateBack();
			},
			onClickTitleRightIcon() {
				IOOC.setMock()
			},
			onClickTitleRightIcon2() {
				IOOC.setMock()
			},
			onFilterEnsureBtnClick(items) {
				this.$refs.filter.dismiss();
				let screen = "";
				items.forEach((item, index) => {
					if (index != items.length - 1) {
						screen += item.status + ","
					} else {
						screen += item.status
					}
				})
				this.screen = screen;
				this.refresh();
			},
			onStatusClick() {
				this.refresh();
			},
			onScroll(event) {
				var tab = this.tabBars[this.tabIndex];
				tab.content.scrollTop = event.detail.scrollTop;
			},
			onRefresh(e) {
				var tab = this.tabBars[this.tabIndex];
				if (tab.content.refreshing && !tab.content.refreshFlag) { // 
					return;
				}
				tab.content.page = 1;
				tab.content.loadStatus = tab.content.page == tab.content.total_pages ? constant.LOAD_STATUS.noMore :
					constant.LOAD_STATUS.more;
				tab.content.refreshing = true;
				this.getList(this.tabIndex)
			},
			onLoadMore(e) {
				var tab = this.tabBars[this.tabIndex];
				if (tab.content.loadStatus == constant.LOAD_STATUS.noMore) {
					return;
				}
				tab.content.loadStatus = constant.LOAD_STATUS.loading;
				tab.content.page++;
				this.getList(this.tabIndex);
			},
			getList(index) {
				const url = IOOC.list();
				if (!url) {
					return;
				}
				var tab = this.tabBars[this.tabIndex];
				let param = {
					status: tab.type,
					page: tab.content.page,
				};
				let option = {
					isNeedShowLoading: false
				};
				util.request(url, param, option, {
					success: this.requestSuccess,
					fail: this.requestFail,
					complete: this.requestComplete
				});
			},
			requestSuccess(res) {
				var tab = this.tabBars[this.tabIndex];
				if (res.statusCode != 200) {
					tab.content.refreshing = false;
					tab.content.isRequestComplete = true;
					return;
				}
				tab.content.firstRequest = false;
				let data = res.data.data;
				let list = data.list;

				if (tab.content.refreshing || tab.content.refreshFlag || tab.content.list.length == 0) {
					tab.content.total_pages = util.calTotalPage(data.total_list);
					this.clearTabData(this.tabIndex);
					tab.content.list = list;
					tab.content.loadStatus = tab.content.total_pages == 1 ? constant.LOAD_STATUS.noMore : constant
						.LOAD_STATUS.more;
				} else if (tab.content.loadStatus == constant.LOAD_STATUS.loading) {
					tab.content.hide = true;
					if (list.length > 0) {
						tab.content.list = tab.content.list.concat(list);
					}
					tab.content.loadStatus = tab.content.page > tab.content.total_pages ? constant.LOAD_STATUS
						.noMore : constant.LOAD_STATUS.more;
					const _this = this;
					//解决分页数据很少时，加载更多显示问题
					tab.content.scrollTopReal = -1
					setTimeout(()=>{
						//_this.scrollTop = 0
						tab.content.scrollTopReal = tab.content.scrollTop - 40
					}, 300)
				}
				tab.content.contentStatus = tab.content.list.length == 0 ? constant.CONTENT_STATUS.EMPTY : {};
			},
			requestFail(res, status) {
				if (this.tabBars[this.tabIndex].content.list.length == 0) {
					this.tabBars[this.tabIndex].content.contentStatus = status;
				}
			},
			requestComplete() {
				var tab = this.tabBars[this.tabIndex];
				tab.content.refreshFlag = false;
				tab.content.firstRequest = false;
				tab.content.refreshing = false;
				tab.content.isRequestComplete = true;
				uni.hideLoading()
			},
			onTabItemClick(index) {
				this.switchTab(index);
			},
			onTabChange(e) {
				let index = e.target.current || e.detail.current;
				this.switchTab(index);
				let tab = this.tabBars[index];
				if (tab.content.list.length > 0 || !tab.content.refreshFlag) {
					return;
				}
				this.refresh();
			},
			switchTab(index) {
				if (this.tabIndex === index) {
					return;
				}

				// 缓存 tabId
				if (this.tabBars[this.tabIndex].content.list.length > MAX_CACHE_DATA) {
					let isExist = this.cacheTab.indexOf(this.tabIndex);
					if (isExist < 0) {
						this.cacheTab.push(this.tabIndex);
					}
				}

				this.tabIndex = index;
				this.scrollInto = this.tabBars[index].id;

				// 释放 tabId
				if (this.cacheTab.length > MAX_CACHE_PAGE) {
					let cacheIndex = this.cacheTab[0];
					this.clearTabData(cacheIndex);
					this.cacheTab.splice(0, 1);
				}
			},
			clearTabData(cacheIndex) {
				this.tabBars[cacheIndex].content.list.length = 0;
				this.tabBars[cacheIndex].content.loadingText = "加载更多...";
			},
			onItemClick(item2, index2) {
				// uni.navigateTo({
				// 	url: '/pages/repair-detail/repair-detail'
				// })
			},
			ensure() {
				uni.navigateBack();
			},
			onAuditBtnClick(item2, index2) {

			},
			onAddEmployeeBtnClick() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url('../../static/common.scss');

	.image-fashion-logo {
		width: 136rpx;
	}

	/* #ifndef APP-PLUS */
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
	}

	/* #endif */

	.tabs {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		background-color: #ffffff;
		/* #ifndef APP-PLUS */
		height: 100vh;
		/* #endif */
	}

	.scroll-v {
		background: #F6F7FB;
	}

	.loading-icon {
		width: 20px;
		height: 20px;
		margin-right: 5px;
		color: #999999;
	}

	.loading-more {
		align-items: center;
		justify-content: center;
		padding-top: 10px;
		padding-bottom: 10px;
		text-align: center;
	}

	.loading-more-text {
		font-size: 28rpx;
		color: #999;
	}

	c-tab-bar {
		background-color: #ffffff;
	}

	.text-bottom-btn {
		width: 100%;
		height: 90rpx;
		background-color: $main-colro1;
		color: $uni-font-size-lg;
	}
</style>